import ArkDialog from "../ark-dialog/ArkDialog.vue";
import {ArkDialogOptions} from "../ark-dialog/ArkDialogOptions";
import {ElMessage} from "element-plus";

export default {
  title: 'ark-component-v2/ArkDialog',
  component: ArkDialog,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、v3-easyui、typescript、lodash、scss、tailwindcss、ArkScroll、ArkActionButton</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkDialogOptions'},
    header: {description: '对话框头部'},
    default: {description: '对话框内容部分'},
    footer: {description: '对话框脚部'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkDialogOptions) => ({
    components: {ArkDialog},
    setup() {
      return {args};
    },
    template: `
      <div style="width: 850px;height: 700px">
        <el-button type="primary" @click="args.options.show=true">打开对话框</el-button>

        <ArkDialog v-model:options="args.options">
          <div class="h-full flex justify-center items-center">内容区</div>
        </ArkDialog>
      </div>
    `,
  }),
  args: {
    options: {
      show: false,
      fullscreen: false,
      width: 500,
      height: 500,
      modal: true,
      title: '对话框标题',
      closeable: true,
      footer: {
        show: true,
        cancel: {
          beforeClick: () => {
            ElMessage({
              message: '按钮点击之前的操作，无参数',
              type: 'success',
            });
          },
          onClick: () => {
            ElMessage({
              message: '按钮点击操作，无参数',
              type: 'success',
            });
          },
          afterClick: (clickReturn: void | Promise<any>) => {
            ElMessage({
              message: '按钮点击之后的操作，参数请看控制台打印',
              type: 'success',
            });
            console.log(clickReturn)
          },
        }
      },
      onClose: () => {
        ElMessage({
          message: '关闭对话框操作，无参数',
          type: 'success',
        });
      }
    }
  },
};